<template>
  <div id="web-page">
    <section v-loading="isLoading" element-loading-text="拼命加载中" class="main-content">
      <!--title-card-->
      <section class="title-card" v-for="(item, i) in title_list" :key="i" @click="showDetail(item.filename)">
        <h2>{{ item.title }}</h2>
        <p>{{ item.date }}</p>
      </section>
    </section>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: "web",
  data() {
    return {
      isLoading: true,
      title_list: []
    };
  },
  methods: {
    async getTitle() {
      try {
        let data = await this.$axios.get('/article')
        if (data.data.code === 1) {
          this.title_list = data.data.data
          this.isLoading = false
        }

        if (data.data.code === 2) {
          thiis.$message({type: 'error', message: '加载出现错误！'})
        }
      } catch (err) {
        this.$message({type:'error', message: `加载列表出现错误！${err}`})
      }
    },
    showDetail(filename) {
      this.$router.push({
        path: '/detail',
        query: {
          filename: filename
        }
      })
    }
  },
  mounted() {
   this.getTitle()
  }
};
</script>

<style lang="scss" scoped>
.main-content {
  position: relative;
  top: 80px;
  min-height: 450px;
  .title-card {
    cursor: pointer;
    margin-bottom: 15px !important;
    margin: 0 auto;
    width: 75%;
    min-height: 80px;
    box-shadow: 3px 3px 3px #bdc3c7;
    border-radius: 8px;
    border: 1px rgba(44, 62, 80, 0.2) solid;
    transition: all .4s ease-in-out;
    h2, p {
      margin: 15px;
    }
    p {
      color: rgba(149, 165, 166,1.0);
    }
    &:hover {
      padding-top: 4px;
    }
  }
}
</style>
